<!-- input选择下拉标签 -->
<template>
  <view class="">
    <view class="" @click="onShowPicker">
      <u--input v-bind="$attrs" v-model="title" v-on="{ ...$listeners, change: () => {} }" :disabledColor="disabledColor" disabled></u--input>
    </view>
    <u-popup :show="showPicker">
      <view class="u-popup-content u-popup-content-tags">
        <uni-view class="u-toolbar u-popup-footer">
          <uni-view class="u-toolbar__cancel__wrapper" @click="cancel">
            <uni-text class="u-popup-footer-item u-toolbar__wrapper__cancel" style="color: rgb(144, 145, 147)"><span>取消</span></uni-text>
          </uni-view>
          <uni-view class="u-toolbar__confirm__wrapper" @click="confirm">
            <uni-text class="u-popup-footer-item u-toolbar__wrapper__confirm" style="color: rgb(60, 156, 255)"><span>确定</span></uni-text>
          </uni-view>
        </uni-view>
        <u-checkbox-group v-model="valComputed" placement="column">
          <view class="u-popup-body">
            <view class="u-popup-body-item" v-for="(item, index) in listByCodes" :key="index">
              <u-checkbox :customStyle="{ marginBottom: '8px' }" :label="item.title" :name="item.value" />
            </view>
          </view>
        </u-checkbox-group>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {
  queryDictModelByCode, //
  ajaxGetDictItems, //字典标签专用（通过code获取字典数组）
  serviceAjaxGetDictItems, // 获取系统级字典
} from '@/api/index.js'
import { initDictOptions } from '@/utils/JDictSelectUtil.js'

export default {
  data() {
    return {
      val: '',
      title: '', // 选中的标题名称
      showPicker: false, // 是否显示弹窗
      listByCodes: [], // 字典列表
      loading: false, // 是否加載
      defaultIndex: [0], // 弹窗默认选中的列 - 默认选中第一列
    }
  },
  model: {
    prop: 'value',
    event: 'change',
  },
  props: {
    // 字典编号
    dictName: {
      type: String,
      default: '',
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    // 选中的值
    value: {
      type: [String, Number],
      default: '',
    },
  },
  watch: {
    dictName: {
      handler(val) {
        if (val) {
          this.queryDictModelByCodes(val)
        }
      },
      immediate: true,
    },
    cumData() {
      this.revealTitle()
    },
  },
  computed: {
    cumData() {
      return {
        valComputed: this.valComputed,
        listByCodes: this.listByCodes,
      }
    },
    valComputed: {
      get() {
        return this.value?.split?.(',') || []
      },
      set(val) {
        this.$emit('change', val.join(','))
      },
    },
    // 当是disabled为true改变禁用的颜色
    disabledColor() {
      if (this.disabled) {
        return '#f5f7fa'
      } else {
        return '#FFFFFF'
      }
    },
  },
  methods: {
    // 当 value 和字典发生变化时，重新获取 title
    revealTitle() {
      if (this.valComputed && this.listByCodes?.length) {
        const valArr = this.value.split(',')
        const title = this.listByCodes.flatMap((item) => {
          if (valArr.includes(item.value)) {
            return [item.title]
          }
          return []
        })
        this.title = title.join(',')
        this.$emit('update:title', this.title)
        return
      }
      this.$emit('update:title', '')
      this.title = ''
    },
    cancel() {
      this.valComputed = []
      this.title = ''
      this.showPicker = false
    },
    confirm() {
      this.showPicker = false
      // this.$emit('change', this.value.join(','))
    },
    // 点击弹出弹框
    onShowPicker() {
      if (this.disabled) {
        return false
      }
      if (!this.listByCodes || !this.listByCodes.length) {
        uni.showToast({
          title: '暂无数据',
          icon: 'none',
        })
        return false
      }
      this.showPicker = true
    },
    //字典
    async queryDictModelByCodes(name) {
      if (!name) return
      try {
        this.loading = true
        const res = await initDictOptions(name)
        if (res.success) {
          if (res.result && res.result.length) {
            this.listByCodes = res.result
          } else {
            this.listByCodes = []
          }
        }
      } catch (error) {
        console.error('多选字典加载失败', error)
      } finally {
        this.loading = false
      }
    },
    // 点击确定
    onConfirm(item) {
      this.title = item.value[0].title
      this.$emit('change', item.value[0].value)
      this.showPicker = false
    },
    // 点击取消
    onCancel() {
      this.showPicker = false
    },
  },
  mounted() {
    //初始化数据
    this.queryDictModelByCodes(this.dictName)
  },
}
</script>

<style lang="scss" scoped>
.u-popup-content-tags {
  .u-popup-footer {
    height: 84rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .u-popup-footer-item {
      font-size: 16px;
      padding: 0 30rpx;
    }
  }
  .u-popup-body {
    padding: 0 20rpx;
  }
  .u-popup-body-item {
    ::v-deep uni-text {
      width: 100%;
    }
  }
}
</style>
